<template>
    <view class="container">
        <view class="list">
            <view class="item" v-for="item in planList" :key="item.planId">
                <view class="left">
                    <view class="period">第 {{item.FSortNo}} 期: {{item.debitDate}}</view>
                    <view class="amount">¥{{item.FDebitAmount}}</view>
                </view>
                <view class="right">
                    <view class="status" :class="item.FDebitStatus === '01' ? 'done' : 'pending'">
                        {{ item.FDebitStatus == '01' ? item.FDebitType : '未扣'}}
                    </view>
                    <view class="date">{{item.FDebitSuccessTime}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRentOrders } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'

const daikouList = ref<any[]>([
    { amount: 540, date: '2025-06-06', status: '未扣' },
    { amount: 540, date: '2025-07-06', status: '未扣' },
    { amount: 540, date: '2025-08-05', status: '未扣' },
    { amount: 540, date: '2025-09-04', status: '未扣' },
    { amount: 540, date: '2025-10-04', status: '未扣' },
    { amount: 540, date: '2025-11-03', status: '未扣' },
    { amount: 540, date: '2025-12-03', status: '未扣' }
])

let orderNo = ''
onLoad((options: any) => {
    orderNo = options.orderNo
    // TODO: 这里可以调用接口获取实际的扣费列表数据
    getDaikouList()
})

const planList = ref<any[]>([])
const getDaikouList = () => {
    // 调用接口获取扣费列表
    getRentOrders({
        orderNo: orderNo,
    }).then(res => {
        let orderInfo = res.data.data.list[0]
        console.log(orderInfo);

        try {
            planList.value = JSON.parse(orderInfo.planStr)
        } catch(err) {
            planList.value = []
        }
        console.log(planList.value);

    })
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding: 20rpx;
}

.list {
    background: #fff;
    border-radius: 12rpx;
    padding: 0 20rpx;

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .left {
            .period {
                font-size: 28rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 10rpx;
            }

            .amount {
                font-size: 32rpx;
                color: #ff8800;
                font-weight: bold;
                margin-bottom: 10rpx;
            }


        }

        .right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .status {
                font-size: 26rpx;
                padding: 8rpx 24rpx;
                border-radius: 30rpx;
                width: fit-content;
                &.done {
                    color: #52c41a;
                    background: rgba(82, 196, 26, 0.1);
                }

                &.pending {
                    color: #999;
                    background: #f5f5f5;
                }
            }
            .date {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
</style>
